<template>
  <div>
    <!--面包屑导航-->
    <Breadcrumb>
      <template #firstTitle>
        <span>用户管理</span>
      </template>
      <template #secondTitle>
        <span>用户列表</span>
      </template>
    </Breadcrumb>

    <!--卡片视图-->
    <el-card>
      <!--搜索与添加-->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" clearable v-model="queryInfo.query" @clear="getUserList">
            <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="addDialogVisible = true">添加用户</el-button>
        </el-col>
      </el-row>
      <!--用户列表-->
      <el-table
        border
        stripe
        :data="userList">
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="username" label="姓名"></el-table-column>
        <el-table-column prop="email" label="邮箱"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="role_name" label="角色"></el-table-column>
        <el-table-column prop="mg_state" label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.mg_state" @change="ueserStateChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!--修改按钮-->
            <el-tooltip class="item" effect="dark" content="修改" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-edit" size="mini"
                         @click="showEditDialog(scope.row.id)"></el-button>
            </el-tooltip>
            <!--删除按钮-->
            <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteOpen(scope.row.id)"></el-button>
            </el-tooltip>
            <!--分配角色按钮-->
            <el-tooltip class="item" effect="dark" content="分配角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-setting" size="mini" @click="setRole(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <!--添加用户对话框-->
    <el-dialog
      title="添加用户"
      :visible.sync="addDialogVisible"
      @close="addDialogClosed"
      width="50%">
      <!--内容主体-->
      <el-form
        status-icon
        :model="addForm"
        :rules="addFormRules"
        ref="addFormRef"
        label-width="70px">
        <!--用户名-->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" type="password" prefix-icon="iconfont icon-3702mima"></el-input>
        </el-form-item>
        <!--邮箱-->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email" prefix-icon="el-icon-message"></el-input>
        </el-form-item>
        <!--手机号-->
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="addForm.mobile" prefix-icon="el-icon-phone"></el-input>
        </el-form-item>
      </el-form>
      <!--内容底部-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改用户信息对话框-->
    <el-dialog
      title="修改用户信息"
      :visible.sync="editDialogVisible"
      @close="editDialogClosed"
      width="50%">
      <!--内容主体-->
      <el-form
        status-icon
        :model="editForm"
        :rules="editFormRules"
        ref="editFormRef"
        label-width="70px">
        <!--用户名-->
        <el-form-item label="用户名">
          <el-input
            v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <!--邮箱-->
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <!--手机号-->
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!--内容底部-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>

    <!--分配角色对话框-->
    <el-dialog
      title="分配角色"
      :visible.sync="setRoleDialogVisible"
      @close="setRoleDialogClosed"
      width="50%">
      <!--内容主体-->
      <p>当前的用户：{{userInfo.username}}</p>
      <p>当前的角色：{{userInfo.role_name}}</p>
      <p>分配新角色：
        <el-select v-model="selectedRoleId" placeholder="请选择">
          <el-option
            v-for="item in rolesList"
            :key="item.id"
            :label="item.roleName"
            :value="item.id">
          </el-option>
        </el-select>
      </p>
      <!--内容底部-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="setRoleDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveRoleInfo">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import Breadcrumb from '@/components/common/Breadcrumb.vue'

  export default {
    name: "Users",
    data() {
      // 验证邮箱规则
      const checkEmail = (rule, value, callback) => {
        let reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error('请输入正确的邮箱'));
        }
      };
      // 验证手机号规则
      const checkMobile = (rule, value, callback) => {
        let reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error('请输入正确的手机号码'));
        }

      };

      return {
        queryInfo: {  // 获取用户列表的参数对象
          query: '',
          pagenum: 1, // 当前的页数
          pagesize: 5 // 当前每页显示多少条数据
        },
        userList: [],
        total: 0,
        addDialogVisible: false,  //控制添加用户对话框的显示和隐藏
        addForm: {  //添加用户表单数据
          username: '',
          password: '',
          email: '',
          mobile: ''
        },
        addFormRules: { //添加表单的校验规则
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
          ],
          email: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
            {validator: checkEmail, trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {validator: checkMobile, trigger: 'blur'}
          ]
        },
        editDialogVisible: false, //控制修改用户信息对话框的显示和隐藏
        editForm: {},  //查询到的用户信息数据
        editFormRules: {  //修改表单的校验规则
          email: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
            {validator: checkEmail, trigger: 'blur'}
          ],
          mobile: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {validator: checkMobile, trigger: 'blur'}
          ]
        },
        setRoleDialogVisible: false,// 控制分配角色对话框的显示与隐藏
        userInfo: {}, // 需要被分配角色的用户信息
        rolesList: [],  //角色列表
        selectedRoleId: '', //已选中的角色ID值
      }
    },
    components: {
      Breadcrumb
    },
    created() {
      this.getUserList();
    },
    methods: {
      // 获取用户列表
      async getUserList() {
        const {data: res} = await this.$http.get('users', {params: this.queryInfo});
        // console.log(res);
        if (res.meta.status !== 200) {
          this.$message.error(`获取用户数据: ${res.meta.msg}`);
          return;
        }
        this.userList = res.data.users;
        this.total = res.data.total;
      },
      // 改变用户状态
      async ueserStateChange(userInfo) {
        // console.log(userInfo);
        const {data: res} = await this.$http.put(`users/${userInfo.id}/state/${userInfo.mg_state}`);
        // console.log(res);
        if (res.meta.status !== 200) {
          userInfo.mg_state = !userInfo.mg_state;
          this.$message.error('更新用户状态失败');
          return;
        }
        this.$message.success('更新用户状态成功！');
      },
      // 监听pageSize改变
      handleSizeChange(newSize) {
        // console.log(`每页 ${newSize} 条`);
        this.queryInfo.pagesize = newSize;
        this.getUserList();
      },
      // 监听页码值的改变
      handleCurrentChange(newPage) {
        // console.log(`当前页: ${newPage}`);
        this.queryInfo.pagenum = newPage;
        this.getUserList();
      },
      // 监听添加用户对话框关闭
      addDialogClosed() {
        this.$refs.addFormRef.resetFields();
      },
      // 添加用户
      addUser() {
        this.$refs.addFormRef.validate(async (valid) => {
          if (!valid) return;
          // 可以发起添加用户请求
          const {data: res} = await this.$http.post('users', this.addForm);
          // console.log(res);
          if (res.meta.status !== 201) {
            this.$message.error('添加用户失败');
            this.addDialogVisible = false;
            return;
          }
          this.$message.success('添加用户成功');
          this.addDialogVisible = false;
          this.getUserList();
        });
      },
      // 展示修改用户信息对话框
      async showEditDialog(id) {
        // console.log(id);
        const {data: res} = await this.$http.get(`users/${id}`);
        // console.log(res);
        if (res.meta.status !== 200) {
          this.$message.error('查询用户信息失败');
          return;
        }
        this.editForm = res.data;
        this.editDialogVisible = true;
      },
      // 监听添加用户对话框关闭
      editDialogClosed() {
        this.$refs.editFormRef.resetFields();
      },
      // 修改用户信息并提交
      editUserInfo() {
        this.$refs.editFormRef.validate(async (valid) => {
          if (!valid) return;
          // 可以发起修改用户信息请求
          const {data: res} = await this.$http.put(`users/${this.editForm.id}`, {
            email: this.editForm.email,
            mobile: this.editForm.mobile
          });
          // console.log(res);
          if (res.meta.status !== 200) {
            this.$message.error('修改用户信息失败');
            this.editDialogVisible = false;
            return;
          }
          this.$message.success('修改用户信息成功');
          this.editDialogVisible = false;
          this.getUserList();
        });
      },
      // 删除提示对话框
      deleteOpen(id) {
        this.$confirm('此操作将永久删除该用户数据, 是否继续?', '删除用户信息', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const {data: res} = await this.$http.delete(`users/${id}`);
          // console.log(res);
          if (res.meta.status !== 200) {
            this.$message.error('删除失败');
            return;
          }
          this.$message.success('删除成功!');
          this.getUserList();
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },
      // 展示分配角色的对话框
      async setRole(userInfo){
        this.userInfo = userInfo;
        const {data: res} = await this.$http.get('roles');
        // console.log(res);
        if (res.meta.status !== 200) {
          this.$message.error(`获取角色列表失败: ${res.meta.msg}`);
          return;
        }
        this.rolesList = res.data;
        this.setRoleDialogVisible = true;

      },
      async saveRoleInfo(){
        if (!this.selectedRoleId){
          this.$message.error('请选择要分配的角色');
          return;
        }
        const {data: res} = await this.$http.put(`users/${this.userInfo.id}/role`, {
          rid: this.selectedRoleId
        });
        // console.log(res);
        if (res.meta.status !== 200) {
          this.$message.error(`更新角色失败: ${res.meta.msg}`);
          return;
        }
        this.$message.success(`更新角色成功`);
        this.getUserList();
        this.setRoleDialogVisible = false;
      },
      setRoleDialogClosed(){
        this.selectedRoleId = '';
        this.userInfo = {};
      }
    }
  }
</script>

<style scoped>

</style>
